<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="m-all">
<head th:replace="common :: head('首页')">
</head>
<body style=" overflow-y: hidden" class="m-all">
<div id="app" class="m-all">
    <el-container style="height: 100%; border: 1px solid #eee">
        <el-header th:replace="common :: navMenuX">

        </el-header>

        <el-container>
            <el-aside id="leftNav" style="max-width: 200px; width: auto; background-color : #545c64">
                <el-button @click="changeLeftWidth" size="mini" style="width: 100%; background-color : #545c64; color: white">
                    |||
                </el-button>
                <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @close="handleClose"
                         background-color="#545c64"
                         text-color="#fff"
                         active-text-color="#ffd04b"
                         :collapse="isCollapse">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">机构管理</span>
                        </template>
                        <el-submenu index="1-4">
                            <span slot="title">机构核对</span>
                            <el-menu-item index="1-4-1" @click="addTab(editableTabsValue,'关联关系维护','/qyWeixin/org/orgList','orglist')">关联关系维护</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main style="height: 100%; padding: 0; overflow-y: hidden">
                <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" style="height: 100%">
                    <el-tab-pane style="height: 100%"
                            v-for="(item, index) in editableTabs"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name"
                    >
                        <test :src="item.content" :id="item.name"></test>

                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
<!--        <el-footer>Footer</el-footer>-->
    </el-container>
</div>
</body>
<style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
    .el-aside {
        color: #333;
    }
    .el-tabs__content {
        height: 100%;
    }
    .el-tabs__header {
        margin: auto;
    }
</style>

<script>

    //注册全局组件
    //加载特征管理列表
    //var htmlobj=$.ajax({url:'../views/feature/featureAdd.html',options:{accept: 'text/html, text/plain'},async:false});
    //var html = htmlobj.responseText;
    //
    //注册一个特征管理列表组件
    Vue.component('test', {
        props: {
            src:{
                type : String,
                default: ''
            },
            id:{
                type : String,
                default: ''
            }
        },
        methods:{
            getIframeId(id){
                return 'i_' + id;
            }
        },
        created:function () {
            //组件被创建的时候调用
            //如果该组件通过json引入的，那么可以在父页面将数据放到cookie里面，然后在这里获取
            //例如  getcookie(id)
            //然后就可以使用这个id  初始化data啦
        },
        //template:html 可通过json获取已经定义好的界面 如果有脚手架就更好办啦，直接import然后然道component里面就可以使用啦
        template:'<iframe style="width: 100%; height: 100%; border-width: 0px; top: 0; left: 0; background-color: white; z-index: 9999" :id="getIframeId(id)" :src="src"></iframe>'//这里我就做一个简单的演示  我真正使用的时候是使用上面那种json获取的组件内容或者import引入
    });

    new Vue({
        el: '#app',
        data() {
            return {
                isCollapse: false,
                activeIndex: '1',
                editableTabsValue: '1',
                editableTabs: [{
                    title: '首页',
                    name: '1',
                    content: '/admin/welcome'
                },],
                tabIndex: 1,
                names:[]
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            addTab(targetName, title, content, name) {
                if(!name){
                    name = ++this.tabIndex + '';
                }
                if(this.names.indexOf(name) < 0){
                    this.editableTabs.push({
                        title: title,
                        name: name,
                        content: content
                    });
                    this.names.push(name);
                }

                this.editableTabsValue = name;
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                for(var i = 0; i < this.names.length; i++) {
                    if (this.names[i] == targetName) {
                        this.names.splice(i, 1);
                    }
                }
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            changeLeftWidth() {
                this.isCollapse = !this.isCollapse;
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
        }
    })
</script>
</html>